﻿@page "/pivot-table/drill-through"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;

@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
  <p>This sample demonstrates how to obtain a list of raw items for a particular cell using the drill-through option on double-clicking.</p>  
</SampleDescription>
<ActionDescription>
   <p>In this sample, you can view the raw items of any pivot table cell by double-clicking the cell. The
     drill-through dialog holds the row headers, column headers, and values information of the clicked cell.
     Initially drill-through information is displayed for bound fields and you can include the remaining raw items
     details using the <b>column chooser</b> option in the dialog.</p>
    <p>This feature can be enabled by setting the <code>AllowDrillThrough</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> class to <b>true</b>.</p>
    <p>More information on the drill-through feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/drill-through/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="300" Width="100%" AllowDrillThrough=true ShowFieldList="true" EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                    <PivotViewColumn Name="Order_Source" Caption="Order Source"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="In_Stock" Caption="In Stock"></PivotViewValue>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFilters>
                    <PivotViewFilter Name="Product_Categories" Caption="Product Categories"></PivotViewFilter>
                </PivotViewFilters>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }

    html, body {
        height: 100%;
    }
</style>

@code{

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

}